<template>
	<view>
		<u-sticky>
			<u-tabs class="tabs" :list="tabsList" @click="onTabClick"
				style="padding: 0 24rpx; background: #fff; z-index: 22; position: sticky; top: 0px"
				:activeStyle="{ color: '#171717', fontSize: '16px', fontWeight: 500 }"
				:inactiveStyle="{ color: '#C6C6C6', fontSize: '16px', fontWeight: 500 }" lineColor="#1E6FFF"></u-tabs>
		</u-sticky>
		<!-- #ifdef APP-PLUS -->
		<!-- #endif -->
		<view class="task_lists" :style="{ marginTop: '20rpx' }">
			<collapse name="基础信息" id="outside1" :maxHeight="maxHeight1" :borderRadius="0" :hasIcon="true">
				<view class="listdefault" :id="uId1">
					<view class="action" v-for="(item, key) in basicInfo" :key="key"
						:style="{ width: item.labelWidth + '%' }">
						<view class="list1">{{ item.label }}</view>
						<view class="list2">{{ detailData[item.key] }}</view>
					</view>
				</view>
			</collapse>
			<collapse name="往来单位信息" id="outside2" :maxHeight="maxHeight2" :borderRadius="0" :hasIcon="true">
				<view class="listdefault" :id="uId2">
					<view class="action" v-for="(item, key) in contactUnitInfo" :key="key"
						:style="{ width: item.labelWidth + '%' }">
						<view class="list1">{{ item.label }}</view>
						<view class="list2">
							<template v-if="item.key === 'provisionSmall'">
								<custom-select-material-small class="w-100" :muitFlag="true"
									:parentId="detailData.provisionBroad" v-model="detailData[item.key]"
									placeholder="请选择物料小类" border="none" disabled></custom-select-material-small>
							</template>
							<template v-else>
								{{ detailData[item.key] }}
							</template>
							<!-- {{ detailData[item.key] }} -->
						</view>
					</view>
				</view>
			</collapse>
			<action-collapse name="联系人信息" :childFields="childFields" id="outside3" :dataSource="childTable"
				:borderRadius="0" :hasIcon="true">
			</action-collapse>
			<default-list name="企业资质材料" :borderRadius="0" :hasIcon="true" id="outside4">
				<view class="file-type">法人身份证</view>
				<file-list :fileList="detailData.legalRepresentativeCard"></file-list>
				<view class="file-type-line"></view>
				<view class="file-type">营业执照</view>
				<file-list :fileList="detailData.bussinessLicense"></file-list>
				<view class="file-type-line"></view>
				<view class="file-type">供应商资质证书</view>
				<file-list :fileList="detailData.supplierCertification"></file-list>
				<view class="file-type-line"></view>
				<view class="file-type">以往合作合同</view>
				<file-list :fileList="detailData.cooperativeContract"></file-list>
			</default-list>
		</view>
		<!-- 		<view class="task_bottom" v-if="tabvalue == '待办'">
			<view class="task_bottom_write" @click="approval">
				<image src="../../static/synergy/write_commont.png" mode="aspectFill"></image>
				<text>审批</text>
			</view>
			<view class="refuse" @click="refuseProcess" v-if="nodeObj.isSubmit !== '1'">退回</view>
			<view class="agree" @click="agreeProcess"
				:style="{ flex: nodeObj.isSubmit == '1' ? 1 : 'initial', margin: nodeObj.isSubmit == '1' ? '0 20rpx' : '' }">
				同意
			</view>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
// import CustomHeader from '@/pages/purchase/components/customHeader.vue';
import actionCollapse from '@/pages/purchase/components/actionCollapse.vue'
import fileList from './components/fileList.vue'
import collapse from '@/pages/purchase/components/collapse.vue'
import defaultList from '@/pages/purchase/components/defaultList.vue'
import {
	queryById, // 根据id查询信息
	childList
} from '@/api/purchase/ErpPurchaseSupplier.js'
// import {
// 	BASE_URL
// } from '@/utils/baseUrl.js'
export default {
	data() {
		return {
			tabsList: [{
				name: '基础信息',
				id: 'outside1'
			}, {
				name: '往来单位信息',
				id: 'outside2'
			}, {
				name: '联系人信息',
				id: 'outside3'
			}, {
				name: '企业资质材料',
				id: 'outside4'
			}],
			childTable: [],
			detailData: {}, // 详情数据
			basicInfo: [{
				label: '申请部门',
				key: 'proposerDeptId_dictText',
				labelWidth: 100
			},
			{
				label: '申请人',
				key: 'proposer_dictText',
			},
			{
				label: '申请时间',
				key: 'createTime',
			}
			],
			contactUnitInfo: [{
				label: '企业名称',
				key: 'enterpriseName',
				labelWidth: 100
			},
			{
				label: '商户类型',
				key: 'commercialType_dictText',
			},
			{
				label: '企业信用代码',
				key: 'enterpriseCreditCode',
			},
			{
				label: '企业类型',
				key: 'enterpriseType_dictText',
			},
			{
				label: '法定代表人',
				key: 'legalRepresentative',
			},
			{
				label: '企业地址',
				key: 'enterpriseAddress',
				labelWidth: 100
			},
			{
				label: '公司注册时间',
				key: 'registerDate',
			},
			{
				label: '注册资本',
				key: 'registerCapital',
			},
			{
				label: '开户行',
				key: 'bankName',
				labelWidth: 100
			},
			{
				label: '银行账号',
				key: 'bankAccountNo',
			},
			{
				label: '公司网址',
				key: 'companyWeb',
			},
			{
				label: '物料大类',
				key: 'provisionBroad_dictText',
			},
			{
				label: '物料小类',
				key: 'provisionSmall',
			},
			{
				label: '合作业务',
				key: 'mainBussiness',
				labelWidth: 100
			}
			],
			childFields: {
				// 子表字段
				联系人: 'lxr',
				联系电话: 'lxfs',
			},
			resultList: [], // 流程图数据
			nodePositionInfo: {}, // 坐标信息
			processInstanceId: '',
			scrollTop: 0, // 滚动顶部距离
			model: {}, // 处理单据表信息
			resultObj: {}, // 流程图流转信息
			nodeObj: {}, // 流程节点信息
			tabvalue: '', // 协同首页tabs name
			// childSource: [], // 字表数据
			isClick: false,
			maxHeight1: 0,
			maxHeight2: 0,
			uId1: uni.$u.guid(),
			uId2: uni.$u.guid(),
			title: '供应商管理',
			height: 37,
		}
	},
	components: {
		actionCollapse,
		// detailInformationList,
		fileList,
		collapse,
		defaultList,
		// flowList,
		// CustomHeader
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	created() {
		uni.getSystemInfo({
			success(e) {
				uni.setStorageSync('getSystemInfo', e);
			}
		})
		let safeArea = uni.getStorageSync('getSystemInfo').safeArea.top
		this.height = safeArea + 37
	},
	onReady() {
		// uni.setNavigationBarTitle({
		// 	title: this.model.bpmBizTitle.replace(/(【|】)/g, ''),
		// })
	},
	onLoad(options) {
		// this.model = JSON.parse(decodeURIComponent(options.item))
		options && options.id && this.loadData(options.id)

		var that = this
		// #ifdef APP-NVUE
		var eventChannel = this.$scope.eventChannel // 兼容APP-NVUE
		// #endif
		// #ifndef APP-NVUE
		var eventChannel = this.getOpenerEventChannel()
		// #endif
		// 监听sendMessage事件，获取上一页面通过eventChannel传送到当前页面的数据
		eventChannel.on('sendMessage', function (data) {
			that.tabvalue = data.tabvalue
			that.nodeObj = JSON.parse(decodeURIComponent(data.nodeObj))
			that.loadData(that.nodeObj.dataId)
			that.getNodePositionInfoData(that.model.processInstanceId)
			if (this.tabvalue == '待办') {
				that.getProcessTaskTrans(that.model.id)
			}
			// that.initDictConfig()
			that.getChildTable()
		})
	},
	methods: {
		getChildTable(id) {
			childList({
				pageNo: 1,
				pageSize: 100,
				mainId: this.nodeObj.dataId || id,
				column: 'createTime',
				order: 'desc',
				field: 'id',
			}).then((response) => {
				this.childTable = response.result || []
			})
		},
		// 查询预立项申请详情
		loadData(id) {
			queryById({
				id
			}).then((res) => {
				if (res.success) {
					this.detailData = res.result
					this.$nextTick(function () {
						this.setCollapseHeight()
					})
					this.getChildTable(this.detailData.id)
				} else {
					this.$refs.uToast.show({
						message: res.message,
						type: 'error',
					})
				}
			})
		},
		setCollapseHeight() {
			this.timer = setTimeout(() => {
				clearTimeout(this.timer)
				this.timer = null
				this.$nextTick(function () {
					uni
						.createSelectorQuery()
						.select('#' + this.uId1)
						.boundingClientRect((data) => {
							this.maxHeight1 = data.height
						})
						.exec()
				})
				this.$nextTick(function () {
					uni
						.createSelectorQuery()
						.select('#' + this.uId2)
						.boundingClientRect((data) => {
							this.maxHeight2 = data.height
						})
						.exec()
				})
			}, 300)
		},
		// 点击tabs
		onTabClick(item) {
			uni
				.createSelectorQuery()
				.in(this)
				.select(`#${item.id}`)
				.boundingClientRect((data) => {
					uni.pageScrollTo({
						scrollTop: data.top + this.scrollTop - 54,
						duration: 150,
					})
				})
				.exec()
		},
	},
}
</script>
<style lang="scss" scoped>
@import './common/actionNew.scss';

// .task_lists {
// 	padding: 20rpx 20rpx 0;

// }

.image_lists {
	padding: 0 0 12rpx 12rpx;
	display: flex;
	flex-wrap: wrap;

	.image_list {
		margin-bottom: 20rpx;
		width: 144rpx;
		margin-right: 14rpx;

		.image_img {
			width: 116rpx;
			height: 116rpx;
			padding: 12rpx;
			background: rgba(0, 0, 0, 0.02);
			border-radius: 1px;
			border: 1px solid rgba(0, 0, 0, 0.08);
			position: relative;

			.image_action {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				width: 36rpx;
				height: 36rpx;
			}

			.image_source {
				width: 100%;
				height: 100%;
			}
		}

		.image_name {
			font-size: 10px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #b2b2b2;
			line-height: 28rpx;
			margin-top: 8rpx;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 152rpx;
		}
	}
}

.flow_right {
	display: flex;
	align-items: center;

	image {
		width: 40rpx;
		height: 40rpx;
	}

	text {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1e6fff;
		line-height: 40rpx;
		margin-left: 4rpx;
	}
}

.task_bottom {
	display: flex;
	align-items: center;
	padding: 20rpx 0 20rpx 52rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10000;

	.task_bottom_write {
		display: flex;
		align-items: center;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 8rpx;
		}

		text {
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7f7f7f;
			line-height: 40rpx;
		}
	}

	.refuse {
		width: 168rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 0 16rpx 0 52rpx;
		font-size: 17px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
	}

	.agree {
		width: 318rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #1e6fff;
		border-radius: 10rpx;
		font-size: 17px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
	}
}

.file-type {
	margin-top: 20rpx;
	font-size: 14px;
	// font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #B2B2B2;
}

.file-type-line {
	margin: 20rpx 0 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.1);
	height: 2rpx;
}
</style>